<template>
  <view class="title-bar">
    <view class="title-name flex-row justify-between">
      <view class="title-icon"></view>
      <text class="title-text">{{ title }}</text>
    </view>
  </view>
</template>
<script>
export default {
  components: {},
  props: {
    title: {
      type: String,
      default: "标题",
    },
  },
};
</script>
<style lang="scss" scoped>
.title-bar {
  width: 5rem;
  height: 0.425rem;
  border-bottom: 1px solid #1BCEFF;
  .title-name {
    width: 1.013rem;
    height: 0.275rem;
    .title-icon {
      width: 0.088rem;
      height: 0.188rem;
      background: url("../../static/title-left.png") 0rem 0rem no-repeat;
      background-size: 0.088rem 0.2rem;
      margin-top: 0.038rem;
    }
    .title-text {
      width: 0.8rem;
      height: 0.275rem;
      overflow-wrap: break-word;
      color: rgba(255, 255, 255, 1);
      font-size: 0.2rem;
      font-family: PingFangSC-Medium;
      text-align: left;
      white-space: nowrap;
      line-height: 0.275rem;
    }
  }
  .title-backgroundimg {
    width: 5rem;
    height: 0.013rem;
    margin-top: 0.138rem;
  }
}
</style>
